<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>棣了个棣</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" rel="external nofollow" target="_blank">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="js/jquery-3.6.1.js"></script>
    <script src="https://unpkg.com/element-plus" rel="external nofollow"></script>
</head>

<body>

    <div id="view">
        <audio id="bgm" src="/images/bgm.mp3" autoplay></audio>
        <div class="title">棣了个棣</div>
        <div class="table">
            <div class="item" v-for="j,index in itemData" @click="check(j.code, index, j.id)" :style="j.style"
                :id="j.id">
                <img :src="'/images/icons/'+ j.code +'.png'" alt="">
            </div>

        </div>
        <div class="res">
            <div class="res-row">
                <div class="res-item" v-for="item in resData">
                    <img :src="'/images/icons/'+ item +'.png'" alt="">
                </div>
            </div>
        </div>

        <div style="color: white;">剩余：{{itemData.length}}</div>


        <el-dialog v-model="dialogVisible" title="Tips" width="30%">
            <span>{{text}}</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="again">{{res? '再来一局' : '重新开始'}}</el-button>
                </span>
            </template>
        </el-dialog>


    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    message: "hello world",
                    num: 49,
                    len: 0,
                    n: 5,
                    resData: [],
                    text: '',
                    dialogVisible: false,
                    res: true,
                    itemData: [],
                    oldRow: 0,
                }
            },
            methods: {
                // 获取数据
                getCode() {
                    // 行数：Math.ceil(Math.sqrt(this.num))
                    this.len = this.num
                    let numbers = this.rand(this.num)
                    let row = Math.ceil(Math.sqrt(this.num))
                    this.oldRow = row
                    let tableData = []
                    // 初始化每一个格子的位置
                    while (row > 0 && row > this.oldRow - this.n) {
                        this.r = this.random(2)
                        let r = 0
                        for (let i = 0; i < numbers.length; i++) {
                            let style = "position: absolute;"
                            if (i % row == 0) {
                                style += "top: " + i / row * 60 + "px;"
                            } else {
                                style += "left: " + (i % row + r) * 60  + "px;top:" + Math.floor(i / row) * 60 +
                                    "px;"
                            }
                            if (row != this.oldRow) {
                                style += "z-index:" + (1 + this.oldRow - row) + ";top:" +
                                    ((this.oldRow - row) * 30 + Math.floor(i / row) * 60) + "px;left:" +
                                    ((this.oldRow - row) * 30 + (i % row + r) * 60 ) + "px;"
                            }
                            let num = numbers[i]
                            let code = Math.ceil(num / 3) + 64 + this.random(16)
                            this.itemData.push({
                                num: num,
                                code: String.fromCharCode(code > 90 ? 90 : code),
                                style: style,
                                id: "sm" + (this.oldRow - row) + '-' + (Math.floor(i / row)) + '-' + (i % row)
                            })
                        }
                        row = row - 1
                        numbers = this.rand(row * row)
                    }
                    console.log(this.itemData);
                },
                random(n) {
                    return Math.floor(Math.random() * n)
                },
                // 重新开始
                again() {
                    this.itemData = []
                    this.getCode()
                    this.resData = []
                    this.dialogVisible = false
                },
                // 获取num个不一样的随机数
                rand(num) {
                    let numbers = []
                    for (let i = 1; i <= num; i++) {
                        let rNum = Math.ceil(Math.random() * num)
                        if (numbers.indexOf(rNum) == -1) {
                            numbers.push(rNum)
                        } else {
                            i--
                        }
                    }
                    return numbers
                },
                // 点击元素，放到结果区
                check(code, index, id) {
                    const _this = $("#" + id)
                    const cssList = _this.attr('class')
                    if (!cssList.includes('disabled')) {
                        if (this.resData.length < 7) {
                            this.resData.push(code)
                            this.itemData.splice(index, 1)
                            if (this.getCount(code)) {
                                // 删除三个元素
                                this.delCode(code)
                            }
                        }
                    }

                },
                // 校验是否含有三个一样字母，
                getCount(code) {
                    let count = 0;
                    this.resData.forEach(w => {
                        if (w == code) {
                            count++
                        }
                    })
                    return count == 3
                },
                // 删除相同字母
                delCode(code) {
                    while (this.resData.indexOf(code) != -1) {
                        this.resData.splice(this.resData.indexOf(code), 1)
                    }
                },
                // 添加遮罩
                mask() {
                    for (let i = this.n - 1; i >= 0; i--) {
                        for (let j = 0; j < this.oldRow - i; j++) {
                            for (let n = 0; n < this.oldRow - i; n++) {
                                const item = $('#sm' + i + '-' + j + '-' + n)
                                console.log(item);
                                if (item.length) {
                                    let back1 = $('#sm' + (i - 1) + '-' + j + '-' + n)
                                    let back2 = $('#sm' + (i - 1) + '-' + j + '-' + (n + 1))
                                    let back3 = $('#sm' + (i - 1) + '-' + (j + 1) + '-' + n)
                                    let back4 = $('#sm' + (i - 1) + '-' + (j + 1) + '-' + (n + 1))
                                    back1.addClass('disabled')
                                    back2.addClass('disabled')
                                    back3.addClass('disabled')
                                    back4.addClass('disabled')
                                }
                            }
                        }
                    }
                },
                // 删除遮罩
                removemask() {
                    for (let i = this.n - 1; i >= 0; i--) {
                        for (let j = 0; j < this.oldRow - i; j++) {
                            for (let n = 0; n < this.oldRow - i; n++) {
                                const item = $('#sm' + i + '-' + j + '-' + n)
                                let back1 = $('#sm' + (i + 1) + '-' + j + '-' + n)
                                let back2 = $('#sm' + (i + 1) + '-' + j + '-' + (n - 1))
                                let back3 = $('#sm' + (i + 1) + '-' + (j - 1) + '-' + n)
                                let back4 = $('#sm' + (i + 1) + '-' + (j - 1) + '-' + (n - 1))
                                if (!back1.length && !back2.length && !back3.length && !back4.length) {
                                    item.removeClass('disabled')
                                }
                            }
                        }
                    }
                }
            },
            // 页面挂载之前执行
            mounted() {
                this.getCode()
            },
            // 在修改数据挂载之前执行
            beforeUpdate() {
                if (this.itemData.length <= 0 && this.resData.length == 0) {
                    this.dialogVisible = true
                    this.text = "恭喜，你赢了！"
                }
                if (this.resData.length >= 7) {
                    this.dialogVisible = true;
                    this.text = "对不起，你输了！"
                }
            },
            updated() {
                this.mask()
                this.removemask()
            }
        })
        app.use(ElementPlus);
        app.mount("#view")
    </script>
</body>

</html>